<template>
  <div class="music-list">
    <div
      class="back"
      @click="goBack"
    >
      <i class="icon-back"></i>
    </div>
    <h1 class="title">{{ title }}</h1>
    <div
      class="bg-image"
      :style="bgImageStyle"
      ref="bgImage"
    >
      <div
        class="play-btn-wrapper"
      >
        <div
          v-show="songs.length > 0"
          class="play-btn"
          :style="playBtnStyle"
          @click="random"
        >
          <i class="icon-play"></i>
          <span class="text">随机播放全部</span>
        </div>
      </div>
      <div
        class="filter"
        :style="filterStyle"
      ></div>
    </div>
    <scroll
      class="list"
      :style="scrollStyle"
      v-loading="loading"
      v-no-result:[noResultText]="noResult"
      :probe-type="3"
      @scroll="onScroll"
    >
      <div class="song-list-wrapper">
        <SongList v-if="songs" :rank="rank" :songs="songs" @select="onSelectItem"></SongList>
      </div>
    </scroll>
  </div>
</template>

<script>
import { ref, toRefs, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import SongList from '../base/songList/SongList'
import Scroll from '../wrapScroll/index'

// 页面动画和样式
const usePageStyleEffect = (scrollY, props) => {
  const store = useStore()
  const RESERVED_HEIGHT = 40
  const imageHeight = ref(0) // 图片的高度
  const maxTranslateY = ref(0) // 最大偏移高度
  const bgImage = ref(null)
  const { pic, loading, songs } = toRefs(props)
  const playList = computed(() => store.state.playList)
  // mounted 获取数据
  onMounted(() => {
    imageHeight.value = bgImage.value.clientHeight
    maxTranslateY.value = imageHeight.value - RESERVED_HEIGHT
  })

  // 无数据展示
  const noResult = computed(() => {
    return !loading.value && !songs.value.length
  })

  // 背景图片样式
  const bgImageStyle = computed(() => {
    let zIndex = 0
    let paddingTop = '70%'
    let height = 0
    let translateZ = 0
    if (scrollY.value > maxTranslateY.value) {
      zIndex = 10
      paddingTop = 0
      height = RESERVED_HEIGHT + 'px'
      translateZ = 1
    }
    let scale = 1
    if (scrollY.value < 0) {
      scale = 1 + Math.abs(scrollY.value / imageHeight.value)
    }
    return {
      zIndex,
      paddingTop,
      height,
      transform: `scale(${scale})translateZ(${translateZ}px)`,
      backgroundImage: `url(${pic.value})`
    }
  })

  // 模糊背景样式
  const filterStyle = computed(() => {
    let blur = 0
    if (scrollY.value >= 0) {
      blur = Math.min(maxTranslateY.value / imageHeight.value, scrollY.value / imageHeight.value) * 20
    }
    return {
      backdropFilter: `blur(${blur}px)`
    }
  })

  // 滚动区域样式
  const scrollStyle = computed(() => {
    const bottom = playList.value.length ? '60px' : '0'
    return {
      top: imageHeight.value + 'px',
      bottom
    }
  })

  // 随机播放按钮
  const playBtnStyle = computed(() => {
    return { display: scrollY.value > maxTranslateY.value ? 'none' : '' }
  })
  return {
    bgImage, bgImageStyle, filterStyle, scrollStyle, noResult, playBtnStyle
  }
}

// 页面滚动
const usePageScrollEffect = () => {
  const scrollY = ref(0)
  // 滚动窃听
  const onScroll = (pos) => {
    scrollY.value = -pos.y
  }
  return { scrollY, onScroll }
}

// 页面路由
const useRouterEffect = () => {
  const router = useRouter()
  const goBack = () => {
    router.back()
  }
  return { goBack }
}

export default {
  name: 'MusicList',
  props: {
    songs: {
      type: Array,
      default: () => []
    },
    pic: String,
    title: String,
    loading: Boolean,
    noResultText: {
      type: String,
      default: '抱歉，没有找到可播放的歌曲'
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  setup (props) {
    const store = useStore()
    const { scrollY, onScroll } = usePageScrollEffect()
    const {
      bgImage, bgImageStyle, filterStyle,
      scrollStyle, noResult, playBtnStyle
    } = usePageStyleEffect(scrollY, props)
    const { goBack } = useRouterEffect()
    const { songs } = toRefs(props)
    const onSelectItem = ({ song, index }) => {
      store.dispatch('selectPlay', { list: songs.value, index })
    }

    const random = () => {
      store.dispatch('randomPlay', songs.value)
    }

    return {
      onScroll,
      bgImage,
      bgImageStyle,
      filterStyle,
      scrollStyle,
      noResult,
      playBtnStyle,
      goBack,
      onSelectItem,
      random
    }
  },
  components: { SongList, Scroll }
  // data () {
  //   return {
  //     imageHeight: 0,
  //     scrollY: 0,
  //     maxTranslateY: 0
  //   }
  // },
  // computed: {
  //   noResult () {
  //     return !this.loading && !this.songs.length
  //   },
  //   bgImageStyle () {
  //     const scrollY = this.scrollY
  //     let zIndex = 0
  //     let paddingTop = '70%'
  //     let height = 0
  //     let translateZ = 0
  //     if (scrollY > this.maxTranslateY) {
  //       zIndex = 10
  //       paddingTop = 0
  //       height = RESERVED_HEIGHT + 'px'
  //       translateZ = 1
  //     }
  //     let scale = 1
  //     if (scrollY < 0) {
  //       scale = 1 + Math.abs(scrollY / this.imageHeight)
  //     }
  //     return {
  //       zIndex,
  //       paddingTop,
  //       height,
  //       transform: `scale(${scale})translateZ(${translateZ}px)`,
  //       backgroundImage: `url(${this.pic})`
  //     }
  //   },
  //   filterStyle () {
  //     let blur = 0
  //     const scrollY = this.scrollY
  //     const imageHeight = this.imageHeight
  //     if (scrollY >= 0) {
  //       blur = Math.min(this.maxTranslateY / imageHeight, scrollY / imageHeight) * 20
  //     }
  //     return {
  //       backdropFilter: `blur(${blur}px)`
  //     }
  //   },
  //   scrollStyle () {
  //     return {
  //       top: this.imageHeight + 'px'
  //     }
  //   }
  // },
  // methods: {
  // goBack () {
  //   this.$router.back()
  // },
  // onScroll (pos) {
  //   this.scrollY = -pos.y
  // }
  // },
  // mounted () {
  // this.imageHeight = this.$refs.bgImage.clientHeight
  // this.maxTranslateY = this.imageHeight - RESERVED_HEIGHT
  // }
}
</script>

<style scoped lang="scss">
  .music-list {
    position: relative;
    height: 100%;
    .back {
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 20;
      transform: translateZ(2px);
      .icon-back {
        display: block;
        padding: 10px;
        font-size: $font-size-large-x;
        color: $color-theme;
      }
    }
    .title {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      z-index: 20;
      transform: translateZ(2px);
      @include no-wrap();
      text-align: center;
      line-height: 40px;
      font-size: $font-size-large;
      color: $color-text;
    }
    .bg-image {
      position: relative;
      width: 100%;
      transform-origin: top;
      background-size: cover;
      .play-btn-wrapper {
        position: absolute;
        bottom: 20px;
        z-index: 10;
        width: 100%;
        .play-btn {
          box-sizing: border-box;
          width: 135px;
          padding: 7px 0;
          margin: 0 auto;
          text-align: center;
          border: 1px solid $color-theme;
          color: $color-theme;
          border-radius: 100px;
          font-size: 0;
        }
        .icon-play {
          display: inline-block;
          vertical-align: middle;
          margin-right: 6px;
          font-size: $font-size-medium-x;
        }
        .text {
          display: inline-block;
          vertical-align: middle;
          font-size: $font-size-small;
        }
      }
      .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7, 17, 27, 0.4);
      }
    }
    .list {
      position: absolute;
      bottom: 0;
      width: 100%;
      z-index: 0;
      .song-list-wrapper {
        padding: 20px 30px;
        background: $color-background;
      }
    }
  }
</style>
